import { Button, Popconfirm, Tooltip } from "antd";
import { FC, HTMLAttributes, PropsWithChildren, useContext } from "react";
import { CloseCircleOutlined, PlusCircleOutlined } from "@ant-design/icons";
import { ConfigurePageContext } from "../../../ConfigurePage";
import { ConfigType } from "../../../ConfigurePageType";
import { cloneDeep } from "lodash";

interface ModuleOperateProps {
	index: number;
	className?: HTMLAttributes<HTMLDivElement>["className"];
}

const ModuleOperate: FC<PropsWithChildren<ModuleOperateProps>> = ({ children, className = "", index }) => {
	const { selectedIndex, setSelectedIndex, content, setContent, setAddTypeOpen, setOperateIndex } = useContext(ConfigurePageContext);

	return (
		<div
			className={`border-2 overflow-hidden border-dashed ${selectedIndex === index ? "border-red-500" : "border-transparent"} ${
				className || ""
			} width-full`}
		>
			{children}
			{selectedIndex === index && (
				<div className="absolute left-full top-1/2 z-10 translate-y-[-50%] flex">
					<Popconfirm
						title={`确认删除当前${ConfigType?.[content?.[index]?.type]}模块吗？`}
						onConfirm={() => {
							const copiedData = cloneDeep(content);
							copiedData.splice(index, 1);
							setContent(copiedData);
							setSelectedIndex(null);
						}}
					>
						<Button
							className="ml-2"
							onClick={e => e?.stopPropagation()}
							danger
							icon={<CloseCircleOutlined style={{ color: "red" }} />}
							shape="circle"
						/>
					</Popconfirm>
					<Tooltip title="在后面添加模块">
						<Button
							onClick={() => {
								setAddTypeOpen(true);
								setOperateIndex(index + 1);
							}}
							icon={<PlusCircleOutlined />}
							className="ml-2"
							shape="circle"
						/>
					</Tooltip>
				</div>
			)}
		</div>
	);
};
export default ModuleOperate;
